<template>
	<view class="consult">
		<navbar></navbar>
		<textNavbar myprops="九一律师咨询"></textNavbar>
		<view class="content">
			<view class="content-top">
				<view class="content-top-top"><image src="../../../static/帮助@1x.png" mode=""></image></view>
				<view class="content-content">
					<view class="siwen" v-if="name == '私问' || name == '约见律师' || name == '计时电话' || name == '合同审查' || name == '文书代写' || name == '工伤赔偿' || name == '合伙协议' || name == '律师函' || name == '民事起诉状' || name == '劳动仲裁委托' || name == '离婚咨询' || name == '户籍调查'">{{name}}<text>￥{{qian}}<text style="color: white; margin-left: 10rpx; padding: 2rpx 6rpx; background-color: red; border-radius: 40rpx; font-size: 13px;">优惠 ￥{{coupon_price}}</text></text></view>
					<view class="siwen" v-if="name == '免费咨询'">{{name}}</view>
					<view class="siwen" v-if="name == '委托律师'">{{name}}<text>￥{{qian}}<text style="color: #9c9d9e; margin-left: 10rpx; font-size: 24rpx;">意向金(仅包含咨询)<text style="color: white; margin-left: 10rpx; padding: 2rpx 6rpx; background-color: red; border-radius: 40rpx; font-size: 13px;">优惠 ￥{{coupon_price}}</text></text></text></view>
					<text class="jian">简述问题-律师回复-详细咨询</text>
					<!-- <text class="youxiao">{{this.free}}次文字咨询，有效期48小时</text> -->
					<text class="youxiao">每日{{free}}次免费文字咨询</text>
					<text class="fuwu">已服务{{count}}次+</text>
					<view class="tupian">
						<image class="image1" :src="item.image" mode="" v-for="item in src"></image>
						<text>{{lawyerCount}}位律师在线解答</text>
					</view>
				</view>
			</view>
			<view class="content-center">
				<view class="checkbox" v-show="name == '文书代写'">
					<uni-data-checkbox selectedColor="#179f16" mode="tag" :localdata="sex" @change="changes"></uni-data-checkbox>
				</view>
				<view class="checkbox" v-show="name == '户籍调查'">
					<text>已掌握的资料</text>
					<uni-data-checkbox selectedColor="#179f16" multiple mode="tag" :localdata="sex1" @change="changes1" ></uni-data-checkbox>
				</view>
				<van-cell-group>
				  <van-field
				    :value="phonevalue"
						label="联系手机"
						v-show="name == '约见律师' || name == '委托律师' || name == '计时电话' || name == '户籍调查' || name == '劳动仲裁委托'"
						required
				    placeholder="便于对接律师"
						@input="inputhandler"
				  />
					<view @click="Open1">
						<van-field
							:value="provalue"
							label="所在地区"
							v-if="name == '委托律师' || name === '约见律师' || name === '户籍调查' || name === '劳动仲裁委托'"
							required
							readonly
							is-link
							placeholder="请选择"
						/>
					</view>
					<view @click="Open2">
						<van-field
						  :value="timeValue"
							label="约见时间"
							v-show="name == '约见律师'"
							required
							readonly
							is-link
						  placeholder="请选择"
						/>
					</view>
				</van-cell-group>
				<view class="textarea">
					<textarea :value="values" @input="content" style="width: 100%; height: 100px;" placeholder-style="font-size: 28rpx" placeholder="为了律师能够更准确解答, 请详细、完整描述您遇到的问题, 以及您希望得到什么样的帮助(15~30字)."/>
				</view>
				<view class="uploadimage" v-if="name !== '免费咨询'">
					<view class="uploadview">
						<uni-file-picker v-model="fileList1" limit="1" file-mediatype="image" :imageStyles="imageStyles" @select="sele">
							<van-icon size="25px" name="photo" />				
						</uni-file-picker>
					</view>
					<text>小于4M图片</text>
				</view>
				<view class="content-bottom">
					<view class="content-bottom-view">
						<image src="../../../static/律师认证.png" mode=""></image>
						<text>律师认证</text>
					</view>
					<view class="content-bottom-view">
						<image src="../../../static/托管.png" mode=""></image>
						<text>费用托管</text>
					</view>
					<view class="content-bottom-view">
						<image src="../../../static/退款.png" mode=""></image>
						<text>退款担保</text>
					</view>
					<image src="../../../static/255优惠券.png" mode="" class="yhj" @click="open"></image>
				</view>
			</view>
		</view>
		<view class="fabu">
			<van-button block round type="primary" size="normal" color="#1aad19" @click="tijiao">
				<text class="text1">发布问题</text>
			</van-button>
		</view>
		<view class="fabu" v-show="name !== '委托律师'">
			<van-button block round plain hairline type="primary" color="#1aad19" @click="jump">
				<view class="butn">
					如需要起诉请戳这里
					<text>本地专业律师一对一委托服务</text>
				</view>
			</van-button>
		</view>
		<view class="tabs">
			<tui-tabs :tabs="tabs"
				:currentTab="currentTab" 
				@change="change" 
				width="250"
				bold="true"
				selectedColor="black"
				sliderWidth="50"
				sliderBgColor="black"
				backgroundColor="#EDEDED"
				>
			</tui-tabs>
			<view class="tabitem1" v-show="currentTab == 0">
				<view class="tabitem-big" v-for="item in commentList" :key="item.id">
					<view class="tabitem1-content">
						<image src="../../../static/绿短信.png" mode=""></image>
						<view class="tabitem1-content-right">
							<view class="tabitem1-content-right-top">
								<van-rate :value="item.level" color="red" size="15" @change="onChange" />
								<text>{{item.times}}</text>
							</view>
							<text>{{item.comment}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="tabitem2" v-show="currentTab == 1">
				<view class="tabitem2-big" v-for="item in newOrder" :key="item.id">
					<view class="tabitem2-big-vw">
						<image :src="item.image" mode=""></image>
						<text class="text2">{{item.category}}</text>
						<text class="text3">律师</text>
						<text class="text4">￥{{Number(item.price)}}</text>
						<text class="text5">感谢</text>
					</view>
					<text class="text6">{{item.times}}</text>
				</view>
			</view>
		</view>
		<van-toast id="van-toast" />
		<!-- 优惠劵 -->
		<van-popup
		  :show="show"
		  round
		  position="bottom"
		  custom-style="height: 40%"
		  @close="Close">
			<view class="popup">
				<text>领取优惠权益</text>
				<view class="kaquan-vw" v-for="item in dataList" :key="item.id">
					<view class="kaquan-vw-top">
						<view class="kaquan-vw-top-content">
							<view class="top-content-left">
								<text class="left-text1">{{item.title}}</text>
								<text class="left-text2">满 {{item.use_min_price}} 减 {{item.coupon_price}}</text>
							</view>
							<view class="top-content-right">
								￥<text> {{item.coupon_price}}</text>
							</view>
						</view>
					</view>
					<view class="kaquan-vw-bottom">
						<view class="bottom-content">
							<text>有效期至: {{item.end_time}}</text>
							<view v-if="item.status !== 2" @click="jumpHandler(item)">立即使用</view>
						</view>
					</view>
					<view class="kaquan-vw-left"></view>
					<view class="kaquan-vw-right"></view>
				</view>
			</view>
		</van-popup>
		<!-- 所在地区 -->
		<van-popup :show="show1" round position="bottom">
		  <van-area :area-list="areaList" columns-num="2" title="律所所在地区" @cancel="Close1" @confirm="Finish1" />
		</van-popup>
		<!-- 约见时间 -->
		<van-popup :show="show2" round position="bottom">
		  <van-cascader
				:value="timeValue"
				:options="options1"
				@close="Close2"
				@finish="Finish2"
			/>
		</van-popup>
	</view>
</template>

<script>
	import { areaList } from '@vant/area-data';
	import tuiTabs from "@/components/thorui/tui-tabs/tui-tabs.vue"
	import { serverURL, token } from "../../../services/httpService";
	import Toast from '@vant/weapp/dist/toast/toast';
	import { generateOptions } from '../../../services/tool';
	import { couponss, receive, getfreeConfig, payorder, getPrivateConfig, getsmsConfig, 
		getpointConfig, getcontractConfig, getdocumentConfig, getlawyerConfig, getsurveyConfig,
		getcivilConfig, getcounseConfig, getentrustConfig, getentrustLConfig, getIndustrialConfig, 
		getagreementConfig, payPriceorder, upload_image, commentList, newOrder } from "../../../utils/utils";
	export default {
		components:{
			tuiTabs
		},
		data() {
			return {
				name: '免费咨询', // 名字
				qian: '0', // 钱
				imageStyles: { // 文件上传样式
					width: 50,
					height: 50,
				},
				fileList1: '', // 文件上传
				srcList: '', // 图书上传返回的地址
				currentTab: 0, // 标签页索引
				tabs: [{
						name: "最新评价"
					}, {
						name: "最新订单"
					},
				],
				values: '', // 输入文本内容
				src: [], // 图片地址
				free: '', // 咨询次数
				lawyerCount: '', // 服务次数
				count: '' ,// 已服务服务次数
				coupon_price: '', // 优惠多少
				list: [], // 数组
				show: false, // 弹出层初始
				dataList: [], // 优惠券数组
				phonevalue: '', // 联系手机
				show1: false, // 所在地区模态框
				areaList, // 地区列表数据
				provalue: '', // 地区单元格数据
				province: '', // 地区省份
				city: '', // 地区市区
				show2: false, // 约见日期模态框
				timeValue: '', // 约见时间
				times: '', // 约见时间（年月日）
				sxw: '', // 上午或者下午
				options1: [], // 约见时间数组
				radio3: '',  // checkbox文书代写单选中的数据
				radio4: '',  // checkbox户籍调查多选中的数据				
				sex: [{
						text: '离婚协议',
						value: 0
					}, {
						text: '婚内财产协议',
						value: 1
					}, {
						text: '劳动仲裁申请书',
						value: 2
					},{
						text: '民事起诉状',
						value: 3
					}, {
						text: '民事答辩状',
						value: 4
					}, {
						text: '上述状',
						value: 5
					}, {
						text: '执行异议',
						value: 6
					}, {
						text: '合伙合同',
						value: 7
					}, {
						text: '股权代持',
						value: 8
					}, {
						text: '股权转让合同',
						value: 9
					}, {
						text: '买卖合同',
						value: 10
					}, {
						text: '借款合同',
						value: 11
					}, {
						text: '租赁合同',
						value: 12
					}, 
				],
				sex1: [{
						text: '姓名',
						value: 0
					},{
						text: '身份证号',
						value: 1
					},{
						text: '出生日期',
						value: 2
					},{
						text: '户籍地址',
						value: 3
					},{
						text: '实名认证手机号',
						value: 4
					},{
						text: '公司名称',
						value: 5
					},
				],
				commentList: [], // 最新评价
				newOrder: [], // 最新订单
			}
		},
		onLoad(option) {
			// console.log(option.name);
			this.name = option.name
			this.options1 = generateOptions()
			commentList((e) => {
				// console.log('最新评价', e);
				this.commentList = [...e.data.data]
				console.log('commentList', this.commentList);
			})
			newOrder((a) => {
				// console.log('最新订单', a);
				this.newOrder = [...a.data.data]
				console.log('order', this.newOrder);
			})
			// 优惠券
			couponss((res) => {
				this.dataList = res.data
			})
			switch(option.name) {
				case '免费咨询': {
					getfreeConfig((res) => {
						// console.log('免费咨询',res);
						this.count = res.data.count
						this.free = res.data.free
						this.src = res.data.lawyerList
						this.lawyerCount = res.data.lawyerCount
						// console.log(this.count);
					})
					break;
				}
				case '私问': {
					getPrivateConfig((e) => {
						console.log('私问', e);
						this.qian = e.data.price
						this.lawyerCount = e.data.lawyerCount
						this.free = e.data.free
						this.count = e.data.count
						this.src = e.data.lawyerList
						this.coupon_price = Number(e.data.coupon_price)
					})
					break;
				}
				case '计时电话': {
					getsmsConfig((e) => {
						console.log('计时电话', e);
						this.qian = e.data.price
						this.lawyerCount = e.data.lawyerCount
						this.free = e.data.free
						this.count = e.data.count
						this.src = e.data.lawyerList
						this.coupon_price = Number(e.data.coupon_price)
					})
					break;
				}
				case '约见律师': {
					getpointConfig((e) => {
						console.log('约见律师', e);
						this.qian = e.data.price
						this.lawyerCount = e.data.lawyerCount
						this.free = e.data.free
						this.count = e.data.count
						this.src = e.data.lawyerList
						this.coupon_price = Number(e.data.coupon_price)
					})
					break;
				}
				case '合同审查': {
					getcontractConfig((e) => {
						console.log('合同审查', e);
						this.qian = e.data.price
						this.lawyerCount = e.data.lawyerCount
						this.free = e.data.free
						this.count = e.data.count
						this.src = e.data.lawyerList
						this.coupon_price = Number(e.data.coupon_price)
					})
					break;
				}
				case '文书代写': {
					getdocumentConfig((e) => {
						console.log('文书代写', e);
						this.qian = e.data.price
						this.lawyerCount = e.data.lawyerCount
						this.free = e.data.free
						this.count = e.data.count
						this.src = e.data.lawyerList
						this.coupon_price = Number(e.data.coupon_price)
					})
					break;
				}
				case '律师函': {
					getlawyerConfig((e) => {
						console.log('律师函', e);
						this.qian = e.data.price
						this.lawyerCount = e.data.lawyerCount
						this.free = e.data.free
						this.count = e.data.count
						this.src = e.data.lawyerList
						this.coupon_price = Number(e.data.coupon_price)
					})
					break;
				}
				case '户籍调查': {
					getsurveyConfig((e) => {
						console.log('户籍调查', e);
						this.qian = e.data.price
						this.lawyerCount = e.data.lawyerCount
						this.free = e.data.free
						this.count = e.data.count
						this.src = e.data.lawyerList
						this.coupon_price = Number(e.data.coupon_price)
					})
					break;
				}
				case '民事起诉状': {
					getcivilConfig((e) => {
						console.log('民事起诉状', e);
						this.qian = e.data.price
						this.lawyerCount = e.data.lawyerCount
						this.free = e.data.free
						this.count = e.data.count
						this.src = e.data.lawyerList
						this.coupon_price = Number(e.data.coupon_price)
					})
					break;
				}
				case '离婚咨询': {
					getcounseConfig((e) => {
						console.log('离婚咨询', e);
						this.qian = e.data.price
						this.lawyerCount = e.data.lawyerCount
						this.free = e.data.free
						this.count = e.data.count
						this.src = e.data.lawyerList
						this.coupon_price = Number(e.data.coupon_price)
					})
					break;
				}
				case '劳动仲裁委托': {
					getentrustConfig((e) => {
						console.log('劳动仲裁委托', e);
						this.qian = e.data.price
						this.lawyerCount = e.data.lawyerCount
						this.free = e.data.free
						this.count = e.data.count
						this.src = e.data.lawyerList
						this.coupon_price = Number(e.data.coupon_price)
					})
					break;
				}
				case '委托律师': {
					getentrustLConfig((e) => {
						console.log('委托律师', e);
						this.qian = e.data.price
						this.lawyerCount = e.data.lawyerCount
						this.free = e.data.free
						this.count = e.data.count
						this.src = e.data.lawyerList
						this.coupon_price = Number(e.data.coupon_price)
					})
					break;
				}
				case '工伤赔偿': {
					getIndustrialConfig((e) => {
						console.log('工伤赔偿', e);
						this.qian = e.data.price
						this.lawyerCount = e.data.lawyerCount
						this.free = e.data.free
						this.count = e.data.count
						this.src = e.data.lawyerList
						this.coupon_price = Number(e.data.coupon_price)
					})
					break;
				}
				case '合伙协议': {
					getagreementConfig((e) => {
						console.log('合伙协议', e);
						this.qian = e.data.price
						this.lawyerCount = e.data.lawyerCount
						this.free = e.data.free
						this.count = e.data.count
						this.src = e.data.lawyerList
						this.coupon_price = Number(e.data.coupon_price)
					})
					break;
				}
			}
		},
		methods: {
			// 上传图片逻辑
			sele (event) {
				let token = uni.getStorageSync('token');
				const upload = event.tempFiles[0]
				console.log(upload.path);
				upload_image(upload.path, (e) => {
					let dataObj = JSON.parse(e)
					console.log('成功', dataObj);
					this.srcList = dataObj.data.url
				})
			},
			// 标签页切换
			change(e) {
				this.currentTab = e.index
				// console.log(this.currentTab);
			},
			// 评分
			onChange(event) {
			   this.value = event.datail
			},
			// 文本输入逻辑
			content (event) {
				this.values = event.detail.value
				// console.log(event.detail);
			},
			// 发布问题的逻辑
			tijiao () {
				console.log(this.values);
				console.log(this.free);
				// 内容是否为空
				if (this.values.trim()) {
					switch(this.name) {
						case '免费咨询': {
							let a = {
								type: '1',
								content: this.values
							}
							payorder(a, (e) => {
								console.log('提交', e);
								if (e.status == 200) {
									Toast(e.msg)
									this.values = ''
								} else {
									Toast(e.msg)
								}
							})
							break;
						}
						case '私问': {
							let b = {
								type: '2',
								content: this.values,
								image: this.srcList,
							}
							payPriceorder(b, (a) => {
								console.log('私问', a);
								if (a.status == 200) {
									Toast(a.msg)
									this.values = ''
									this.srcList = ''
									this.fileList1 =  ''
								} else {
									Toast(a.msg)
								}
							})
							break;
						}
						case '计时电话': {
							let c = {
								type: '3',
								content: this.values,
								image: this.srcList,
								phone: this.phonevalue
							}
							payPriceorder(c, (a) => {
								console.log('计时电话', a);
								if (a.status == 200) {
									Toast(a.msg)
									this.values = ''
									this.this.srcList = ''
									this.phonevalue = ''
									this.fileList1 =  ''
								} else {
									Toast(a.msg)
								}
							})
							break;
						}
						case '约见律师': {
							let d = {
								type: '4',
								content: this.values,
								image: this.srcList,
								phone: this.phonevalue,
								province: this.province,
								city: this.city,
								times: this.times,
								timestype: this.sxw,
							}
							payPriceorder(d, (a) => {
								console.log('约见律师', a);
								if (a.status == 200) {
									Toast(a.msg)
									this.values = ''
									this.phonevalue = ''
									this.fileList1 =  ''
									this.timeValue = ''
									this.provalue = ''
								} else {
									Toast(a.msg)
								}
							})
							break;
						}
						case '合同审查': {
							let e = {
								type: '5',
								content: this.values,
								image: this.srcList,
							}
							payPriceorder(e, (a) => {
								console.log('约见律师', a);
								if (a.status == 200) {
									Toast(a.msg)
									this.values = ''
									this.fileList1 =  ''
								} else {
									Toast(a.msg)
								}
							})
							break;
						}
						case '律师函': {
							let f = {
								type: '7',
								content: this.values,
								image: this.srcList,
							}
							payPriceorder(f, (a) => {
								console.log('约见律师', a);
								if (a.status == 200) {
									Toast(a.msg)
									this.values = ''
									this.fileList1 =  ''
								} else {
									Toast(a.msg)
								}
							})
							break;
						}
						case '户籍调查': {
							let g = {
								type: '8',
								content: this.values,
								image: this.srcList,
								category: this.radio4,
								phone: this.phonevalue,
								province: this.province,
								city: this.city,
							}
							payPriceorder(g, (a) => {
								console.log('约见律师', a);
								if (a.status == 200) {
									Toast(a.msg)
									this.values = ''
									this.fileList1 =  ''
								} else {
									Toast(a.msg)
								}
							})
							break;
						}
						case '民事起诉状': {
							let h = {
								type: '9',
								content: this.values,
								image: this.srcList,
							}
							payPriceorder(h, (a) => {
								console.log('约见律师', a);
								if (a.status == 200) {
									Toast(a.msg)
									this.values = ''
									this.fileList1 =  ''
								} else {
									Toast(a.msg)
								}
							})
							break;
						}
						case '离婚咨询': {
							let i = {
								type: '10',
								content: this.values,
								image: this.srcList,
							}
							payPriceorder(i, (a) => {
								console.log('约见律师', a);
								if (a.status == 200) {
									Toast(a.msg)
									this.values = ''
									this.fileList1 =  ''
								} else {
									Toast(a.msg)
								}
							})
							break;
						}
						case '劳动仲裁委托': {
							let j = {
								type: '11',
								content: this.values,
								image: this.srcList,
								phone: this.phonevalue,
								province: this.province,
								city: this.city,
							}
							payPriceorder(j, (a) => {
								console.log('约见律师', a);
								if (a.status == 200) {
									Toast(a.msg)
									this.values = ''
									this.fileList1 =  ''
								} else {
									Toast(a.msg)
								}
							})
							break;
						}
						case '委托律师': {
							let k = {
								type: '12',
								content: this.values,
								image: this.srcList,
								phone: this.phonevalue,
								province: this.province,
								city: this.city,
							}
							payPriceorder(k, (a) => {
								console.log('约见律师', a);
								if (a.status == 200) {
									Toast(a.msg)
									this.values = ''
									this.fileList1 =  ''
								} else {
									Toast(a.msg)
								}
							})
							break;
						}
						case '工伤赔偿': {
							let l = {
								type: '13',
								content: this.values,
								image: this.srcList,
							}
							payPriceorder(l, (a) => {
								console.log('约见律师', a);
								if (a.status == 200) {
									Toast(a.msg)
									this.values = ''
									this.fileList1 =  ''
								} else {
									Toast(a.msg)
								}
							})
							break;
						}
						case '合伙协议': {
							let m = {
								type: '14',
								content: this.values,
								image: this.srcList,
							}
							payPriceorder(m, (a) => {
								console.log('约见律师', a);
								if (a.status == 200) {
									Toast(a.msg)
									this.values = ''
									this.fileList1 =  ''
								} else {
									Toast(a.msg)
								}
							})
							break;
						}
					}
				} else {
					Toast('请输入内容再发布')
				}
			},
			// 打开弹出层
			open () {
				this.show = true
			},
			// 关闭弹出层
			Close () {
				this.show = false
			},
			// 领取优惠券
			jumpHandler (e) {
				// console.log('优惠券', e);
				let arr = {
					couponId: String(e.id)
				}
				receive(arr, (res) => {
					Toast(res.msg)
				})
			},
			// 关闭地区
			Close1 () {
				this.show1 = false
			},
			// 律师所在地区确定逻辑
			Finish1(e) {
				// console.log(e.detail);
				const detail = e.detail.values
				const names = detail.map(item => item.name).join(',')
				this.provalue = names
				this.province = detail[0].name
				this.city = detail[1].name
				// console.log(this.formData.province, this.formData.city, this.formData.area)
				this.show1 = false
			},
			// 打开地区
			Open1 () {
				this.show1 =true
			},
			// 打开地区
			Open2 () {
				this.show2 = true
			},
			// 关闭地区
			Close2 () {
				this.show2 = false
			},
			// 约见时间逻辑
			Finish2(e) {
				const { selectedOptions, value } = e.detail;
				console.log(e.detail);
				const fieldValue = selectedOptions
					.map((option) => option.text)
					.join(' ');
				this.timeValue = fieldValue
				this.times = selectedOptions[0].text
				this.sxw = selectedOptions[1].text
				console.log(this.times);
				console.log(this.sxw);
				this.show2 = false
			},
			// 文书代写的类型
			changes (e) {
				this.radio3 = e.detail.data.text
				console.log(this.radio3);
			},
			// 户籍调查掌握的资料
			changes1 (e) {
				console.log(e.detail.data);
				let a = e.detail.data
				let b = a.map((item, index) => {
					return item.text
				})
				this.radio4 = String(b)
			},
			// 跳到委托律师
			jump () {
				uni.navigateTo({
					url: `/pages/Attorney side/consult/consult?name=委托律师`
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.consult {
		width: 100vw;
		height: 100vh;
		background-color: #EDEDED;
	}
	.content {
		width: 94vw;
		background-color: white;
		margin: 0 auto;
		border-radius: 8px;
	}
	.content > .content-top {
		background-color: #f5f6f8;
		width: 100%;
		height: 15vh;
		border-radius: 8px 8px 0 0;
	}
	.content-top-top {
		height: 23px;
		display: flex;
		justify-content: flex-end;
	}
	.content-top-top > image {
		width: 22px;
		height: 22px;
		position: relative;
		top: 4px;
		right: 5px;
	}
	
	.content-content {
		width: 90vw;
		height: 95px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		font-size: 12px;
		margin: 5px 0 0 10px;
		color: #8e8a8e;
	}
	.siwen {
		font-weight: bolder;
		font-size: 16px;
		color: black;
	}
	.siwen > text {
		color: red;
		margin-left: 10rpx;
	}
	.content-content > .fuwu {
		color: #5d5f67;
		font-weight: bold;
	}
	.tupian {
		margin-top: 5px;
		display: flex;
		align-items: center;
	}
	.tupian > .image1 {
		width: 20px;
		height: 20px;
		margin-right: 3px;
	}
	
	.content-center {
		overflow: hidden;
		padding-top: 5px;
	}
	.content-center > .textarea {
		margin: 20rpx auto 0;
		width: 90vw;
		height: 100px;
	}
	.uploadimage {
		margin: 0 auto;
		width: 90vw;
		height: 42px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.uploadimage > text {
		font-size: 14px;
		color: #cecbd5;
	}
	
	.content-bottom {
		width: 90vw;
		height: 36px;
		display: flex;
		align-items: center;
		margin-left: 5px;
	}
	.content-bottom > image {
		width: 60rpx;
		height: 50rpx;
		margin-left: 120rpx;
	}
	.content-bottom-view {
		font-size: 13px;
		display: flex;
		align-items: center;
		color: #8f8a8d;
		margin-right: 10px;
	}
	.content-bottom-view > image {
		width: 13px;
		height: 13px;
		margin-right: 5px;
	}

	.fabu {
		width: 90vw;
		height: 45px;
		margin: 10px auto;
	}

	.text1 {
		font-weight: bold;
	}

	.butn {
		display: flex;
		flex-direction: column;
		line-height: 20px;
		font-weight: bold;
	}
	.butn > text {
		font-weight: normal;
		font-size: 12px;
	}

	.tabitem-big {
		width: 94vw;
		margin: 5px auto;
	}

	.tabitem1-content {
		display: flex;
		align-items: center;
	}

	.tabitem1-content > image {
		width: 20px;
		height: 20px;
	}

	.tabitem1-content-right {
		height: 50px;
		margin-left: 5px;
	}
	.tabitem1-content-right-top {
		display: flex;
		font-size: 14px;
		color: #aab8cd;
	}

	.tabitem2-big {
		width: 94vw;
		margin: 5px auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.tabitem2-big-vw {
		margin: 5px 0;
		display: flex;
		align-items: center;
	}
	.tabitem2-big-vw > image {
		width: 25px;
		height: 25px;
	}
	.tabitem2-big-vw > .text2 {
		font-weight: bold;
		font-size: 16px;
		color: #576b95;
		margin: 0 5px 0 5px;
	}
	.tabitem2-big-vw > .text3 {
		font-size: 14px;
		margin: 0 5px 0 5px;
	}
	.tabitem2-big-vw > .text4 {
		color: red;
		font-size: 14px;
		font-weight: bold;
		margin: 0 5px 0 5px;
	}
	.tabitem2-big-vw > .text5 {
		font-size: 14px;
		color: #959595;
		margin: 0 5px 0 5px;
	}
	.tabitem2-big > .text6 {
		font-size: 14px;
		color: #a6a6a6;
		margin: 0 5px 0 5px;
	}
	
	::v-deep.icon-del-box {
		width: 18px;
		height: 18px;
	}
	::v-deep.icon-del {
		width: 10px;
		height: 1px;
	}
	
	.popup {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.popup > text {
		display: block;
		margin-top: 60rpx;
		font-size: 26rpx;
		margin-bottom: 20rpx;
	}

	.kaquan-vw {
		width: 92vw;
		height: 100px;
		background-color: #fd744a;
		border-radius: 4px;
		color: white;
		position: relative;
		margin-bottom: 5px;
	}
	.kaquan-vw-top {
		width: 100%;
		height: 70px;
		border-bottom: 1px dashed white;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.kaquan-vw-top-content {
		width: 90%;
		height: 45px;
		display: flex;
		justify-content: space-between;
	}
	.top-content-left {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		font-size: 14px;
	}
	.top-content-left > .left-text2 {
		font-size: 16px;
	}
	.top-content-right {
		width: 45px;
		height: 45px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20px;
	}
	.top-content-right > text {
		font-size: 25px
	}
	.kaquan-vw-left {
		width: 20px;
		height: 20px;
		background-color: #EDEDED;
		border-radius: 50%;
		position: absolute;
		left: -13px;
		bottom: 20px;
	}
	.kaquan-vw-right {
		width: 20px;
		height: 20px;
		background-color: #EDEDED;
		border-radius: 50%;
		position: absolute;
		right: -13px;
		bottom: 20px;
	}
	
	.kaquan-vw-bottom {
		width: 100%;
		height: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.bottom-content {
		width: 90%;
		height: 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.bottom-content > text {
		font-size: 8px;
		font-style: italic;
	}
	.bottom-content > view {
		width: 50px;
		height: 20px;
		border-radius: 20px;
		border: solid 1px white;
		font-size: 8px;
		text-align: center;
		line-height: 20px;
	}
	
	.checkbox {
		margin-left: 10px;
	}
	.checkbox > text {
		display: block;
		font-size: 15px;
		margin-top: 5px;
	}
	::v-deep.checklist-box.is--tag {
		border-radius: 20px !important;
	}
</style>
